<template>
    <div class="novel">
        <!--头部 -->
         <div class="name" @click="$router.go(-1)">书程小驿</div>
         <div class="children" @click="$router.go(-1)" ></div>
         <div class="header">
      <div class="containor">
        <div class="name"></div>
        <ul class="category">
          <li v-for="(category, index) in categories" :key="index">
            {{ category.name }}
          </li>
        </ul>
        <div class="telephone">
          <img
            src="../assets/telephone.png"
            alt="图片丢失"
            width="25px"
            height="25px"
          />
          <span>联系我们</span>
        </div>
      </div>
    </div>
    <div class="swipper">
      <el-carousel height="470px">
        <el-carousel-item v-for="(item, index) in carousel" :key="index">
          <img :src="item.url" alt="图片丢失" />
        </el-carousel-item>
      </el-carousel>
    </div>
    
    <h1>国外文学</h1>
        <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="http://47.109.18.97/images/zcy-html.jpg"  height="200" /> </td>
    <td align="center"><img src="http://47.109.18.97/images/zcy10-html.jpg" height="200" /></td>
    <td align="center"><img src="http://47.109.18.97/images/zcy04-html.jpg" height="200" /></td>
    <td align="center"><img src="http://47.109.18.97/images/zcy09-html.jpg" height="200" /></td>
  </tr>
  <tr>
    <td align="center"><h1>牧羊少年奇幻之旅</h1><br>保罗·科埃略 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>是巴西作家保罗·科埃略创作的长篇小说，首次出版于1988年<br>该小说运用富含哲理和诗意的语言讲述了牧羊少年圣地亚哥追寻宝藏的奇幻冒险故事，具有启发性和励志意义<br>全球销量超过6500万册，是历史上最畅销的葡萄牙语小说。这部小说被誉为20世纪最重要的文学现象之一。</div>
  </el-collapse-item>
  </el-collapse>
  </td>
    <td align="center"><h1>哈姆雷特</h1><br>威廉·莎士比亚 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>由英国剧作家威廉·莎士比亚创作于1599年至1602年间的一部悲剧作品。<br>戏剧讲述了叔叔克劳狄斯谋害了哈姆雷特的父亲，篡取了王位，<br>并娶了国王的遗孀乔特鲁德；哈姆雷特王子因此为父王向叔叔复仇。
</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>童年·在人间我的大学</h1>马克西姆·高尔基 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>作家马克西姆·高尔基的三部曲自传体小说，<br>写出了高尔基对苦难的认识，对社会人生的独特见解，<br>字里行间涌动着一股生生不息的热望与坚强。</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>老人与海</h1>海明威 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>该作围绕一位老年古巴渔夫，与一条巨大的马林鱼在离岸很远的湾流中搏斗而展开故事的讲述<br>尽管海明威笔下的老人是悲剧性的，但他身上却有着尼采“超人”的品质，<br>泰然自若地接受失败，沉着勇敢地面对死亡，这些“硬汉子”体现了海明威的人生哲学和道德理想。</div>
  </el-collapse-item>
  </el-collapse></td>
  </tr>
</table>
        </div>
        <el-divider></el-divider>
<h1>中国文学</h1>
        <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="http://47.109.18.97/images/zcy02-html.jpg"  height="200" /> </td>
    <td align="center"><img src="http://47.109.18.97/images/zcy03-html.jpg" height="200" /></td>
    <td align="center"><img src="http://47.109.18.97/images/zcy05-html.jpg" height="200" /></td>
    <td align="center"><img src="http://47.109.18.97/images/zcy06-html.jpg" height="200" /></td>
    <td align="center"><img src="http://47.109.18.97/images/zcy07-html.jpg" height="200" /></td>
    <td align="center"><img src="http://47.109.18.97/images/zcy08-html.jpg"  height="200" /> </td>
    
  </tr>
  <tr>
    <td align="center"><h1>活着</h1><br>余华 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>《活着》是作家余华的代表作之一，<br>，讲述了在大时代背景下，随着内战、三反五反，大跃进，文化大革命等社会变革，<br>徐福贵的人生和家庭不断经受着苦难，<br>到了最后所有亲人都先后离他而去，仅剩下年老的他和一头老牛相依为命。</div>
  </el-collapse-item>
  </el-collapse>
  </td>
    <td align="center"><h1>许三观卖血记</h1><br>余华 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>小说讲述了许三观靠着卖血渡过了人生的一个个难关，<br>战胜了命运强加给他的惊涛骇浪，而当他老了，知道自己的血再也没有人要时，精神却崩溃了。<br>它以博大的温情描绘了磨难中的人生，以激烈的故事形式表达了人在面对厄运时求生的欲望。
</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>西游记</h1>吴承恩 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>是中国古代第一部浪漫主义章回体长篇神魔小说。<br>描写了孙悟空出世及大闹天宫后，遇见了唐僧、猪八戒、沙僧和白龙马，西行取经，<br>一路上历经艰险、降妖伏魔，经历了九九八十一难，终于到达西天见到如来佛祖，最终五圣成真的故事。<br>该小说以“唐僧取经”这一历史事件为蓝本，通过作者的艺术加工，深刻地描绘了明代社会现实。</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>三国演义</h1>罗贯中 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>又称《三国志演义》）是元末明初小说家罗贯中根据陈寿《三国志》和<br>裴松之注解以及民间三国故事传说经过艺术加工创作而成的长篇章回体历史演义小说，<br>与《西游记》《水浒传》《红楼梦》并称为中国古典四大名著。</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>红楼梦</h1>曹雪芹 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>中国古代章回体长篇小说，中国古典四大名著之一，<br>小说以贾、史、王、薛四大家族的兴衰为背景，以富贵公子贾宝玉为视角，以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线，<br>描绘了一批举止见识出于须眉之上的闺阁佳人的人生百态，展现了真正的人性美和悲剧美，<br>可以说是一部从各个角度展现女性美以及中国古代社会世态百相的史诗性著作</div>
  </el-collapse-item>
  </el-collapse></td>
  <td align="center"><h1>水浒传</h1>施耐庵 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>中国古典四大名著之一，问世后，在社会上产生了巨大的影响，成了后世中国小说创作的典范。<br全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安，以及受招安后为宋朝征战，<br>最终消亡的宏大故事，艺术地反映了中国历史上宋江起义从发生、发展直至失败的全过程，<br>深刻揭示了起义的社会根源。</div>
  </el-collapse-item>
  </el-collapse></td>
  </tr>
</table>
        </div>
</div>

</template>

<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
         categories: [],
         carousel: []
    };
    },
    methods: {
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    findAllCarousel() {
      get("/index/carousel/findAll").then((res) => {
        // 将后台响应的轮播图数据，设置到组件的数据模型中
        this.carousel = res.data;
      });
    },
    },
    created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
     this.findAllCarousel();
    },
    
};
</script>
<style scoped>
.header {
  /* display: flex; */
  height: 80px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
.containor {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  float: left;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.xs{
 cursor: pointer;   
}

</style>